<template>
  <div>
    <h2 class="text-xl font-bold mb-4 text-gray-800">待办统计</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
        <p class="text-sm text-blue-700 font-medium">全部待办</p>
        <p class="text-3xl font-bold text-blue-800">{{ totalTodos }}</p>
      </div>
      <div class="bg-green-50 rounded-lg p-4 border border-green-100">
        <p class="text-sm text-green-700 font-medium">已完成</p>
        <p class="text-3xl font-bold text-green-800">{{ completedTodos }}</p>
      </div>
      <div class="bg-red-50 rounded-lg p-4 border border-red-100">
        <p class="text-sm text-red-700 font-medium">未完成</p>
        <p class="text-3xl font-bold text-red-800">{{ activeTodos }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue'

const props = defineProps<{
  todos: { id: number, title: string, completed: boolean, createdAt: Date }[]
}>()

const totalTodos = computed(() => props.todos.length)
const completedTodos = computed(() => props.todos.filter(todo => todo.completed).length)
const activeTodos = computed(() => props.todos.filter(todo => !todo.completed).length)
</script>
  